export default {
    template:`
    <div class="my-password">
        <input 
            :type="type"
            :value="pwd"
            @focus="flag=true; isFocus=true " 
            @blur="flag = pwd!=''; isFocus=false " 
            @input=" $emit('update:pwd',$event.target.value) "
        >
        <div class="placeholder" :class="{ active:flag||isFocus }">
            <span class="info">Password</span>
            <span class="iconfont icon-eye1" @click=" type = type=='text'?'password':'text' "></span>
        </div>
        <div class="line" :class="{ active:flag||isFocus }"></div>
    </div>
    `,
    data() {
        return {
            type:"password",
            // 记录输入框的输入状态[数据、获取焦点]
            flag: false,
            // 记录输入框是否处于获取焦点的状态
            isFocus:false
        }
    },
    emits:["update:pwd"],
    props:{
        pwd:{
            type:String,
            default:""
        }
    },
    watch: {
        pwd(newValue) {
            this.flag = newValue!=""
        }
    },
    created () {
        this.flag = this.pwd!=""
    },
}